<template>
  <div style="padding: 1rem">
    <!-- 上方菜单 -->
    <div class="main">
      <div>
        <ElForm :inline="true">
          <ElFormItem>
            <ElInput v-model="queryInfo.gname" placeholder="游戏名称模糊查询"></ElInput>
          </ElFormItem>
          <ElFormItem>
            <ElButton @click="showGamePublisherSelector(3)">{{ querytitle }}</ElButton>
          </ElFormItem>
          <ElFormItem>
            <ElButtonGroup>
              <ElButton type="danger" @click="reset">重置</ElButton>
              <ElButton type="primary" @click="requery">查询</ElButton>
            </ElButtonGroup>
          </ElFormItem>
          <ElFormItem>
            <ElButton type="warning" @click="avisible = true">添加</ElButton>
          </ElFormItem>
        </ElForm>
      </div>
    </div>
    <!-- 数据呈现部分 -->
    <div>
      <ElTable :data="list">
        <ElTableColumn label="游戏名称" prop="gname"></ElTableColumn>
        <ElTableColumn label="游戏简介" prop="intro"></ElTableColumn>
        <ElTableColumn label="发行商" prop="tbGamePublisher.publisher"></ElTableColumn>
        <ElTableColumn label="游戏发布时间">
          <template #default="scope">{{ Tools.formatDate(scope.row.created, 'yyyy-MM-dd') }}</template>
        </ElTableColumn>
        <ElTableColumn label="操作">
          <template #default="scope">
            <ElButton size="small" type="danger" @click="del(scope.row)">删除</ElButton>
            <ElButton size="small" type="success" @click="showModify(scope.row)">修改</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
    </div>

    <!-- 软件分类选择的对话框 -->
    <ElDialog title="分类选择" v-model="visible">
      <div>
        <GamePublisherSelector @type-selected="GamePublisherselect"></GamePublisherSelector>
      </div>
    </ElDialog>

    <!-- 添加的对话框 -->
    <ElDialog title="添加游戏" v-model="avisible" @open="resetAdd" @close="requery">
      <div>
        <ElFormItem>
          <ElInput v-model="addInfo.gname" placeholder="游戏名称"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElInput v-model="addInfo.intro" placeholder="游戏简介" type="textarea" rows="5"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElButton @click="showGamePublisherSelector(1)">{{ addtitle }}</ElButton>
        </ElFormItem>
        <ElFormItem>
          <ElDatePicker v-model="addInfo.created" value-format="YYYY-MM-DD" type="date" placeholder="游戏发布时间"></ElDatePicker>
        </ElFormItem>
        <ElButton type="primary" @click="add">添加</ElButton>
      </div>
    </ElDialog>

    <!-- 修改的对话框 -->
    <ElDialog title="修改游戏" v-model="mvisible" @close="requery">
      <div>
        <ElFormItem>
          <ElInput v-model="modifyInfo.gname" placeholder="游戏名称"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElInput v-model="modifyInfo.intro" placeholder="游戏简介" type="textarea" rows="5"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElButton @click="showGamePublisherSelector(2)">{{ modifytitle }}</ElButton>
        </ElFormItem>
        <ElFormItem>
          <ElDatePicker v-model="modifyInfo.created" value-format="YYYY-MM-DD" type="date" placeholder="游戏发行时间"></ElDatePicker>
        </ElFormItem>
        <ElButton @click="modify">修改</ElButton>
      </div>
    </ElDialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElButton, ElDatePicker, ElDialog, ElFormItem, ElInput, ElMessage, ElMessageBox, ElTable, ElTableColumn } from 'element-plus'
import { TbGame, TbGamePublisher } from '../../ts/types/CRUD'
import { BaseDataResult, BasePageVO, BaseResult, PageBean } from '../../ts/types/BaseResult'
import { ApiService } from '../../ts/ApiService'
import Tools from '../../ts/Tools'
import { log } from '../../ts/logger'
import GamePublisherSelector from '../../components/GamePublisherSelector.vue'

// #region 查询
const list = ref([] as Array<TbGame>)
const page = ref({ pageNumber: 1, pageSize: 10 } as PageBean)

const queryInfo = ref({
  gname: '',
  publisher: -1,
})

const reset = () => {
  queryInfo.value = {
    gname: '',
    publisher: -1,
  }
  querytitle.value = '所属发行商'
  requery()
}

const requery = () => {
  page.value.pageNumber = 1
  query()
}

const query = () => {
  ApiService.get(`/crud/game/${page.value.pageSize}/${page.value.pageNumber}`, queryInfo.value, (resp: BaseDataResult<BasePageVO<Array<TbGame>>>) => {
    if (resp.success) {
      list.value = resp.data.data
      page.value = resp.data.pageBean
    }
  })
}

query()
// #endregion

// #region 软件分类对话框
const visible = ref(false)
const vde = {
  dmode: 1,
}
const showGamePublisherSelector = (mode: number) => {
  vde.dmode = mode
  visible.value = true
}

// 回调
const querytitle = ref('所属发行商')
const addtitle = ref('请选择发行商')
const modifytitle = ref('')

const GamePublisherselect = (type: TbGamePublisher) => {
  log.debug('选择的类型:', type)
  if (vde.dmode == 1) {
    addInfo.value.publisher = type.gpid
    addtitle.value = type.publisher
  } else if (vde.dmode == 2) {
    modifyInfo.value.publisher = type.gpid
    modifytitle.value = type.publisher
  } else if (vde.dmode == 3) {
    queryInfo.value.publisher = type.gpid
    querytitle.value = type.publisher
  }
  visible.value = false
}
// #endregion

// #region 添加的对话框
const avisible = ref(false)
const addInfo = ref({} as TbGame)
const resetAdd = () => {
  addInfo.value = {} as TbGame
  addtitle.value = '请选择发行商'
}

const add = () => {
  ApiService.post('/crud/game', addInfo.value, (resp: BaseDataResult<TbGame>) => {
    resp.success ? ElMessage.success(resp.message) : ElMessage.error(resp.message)
    avisible.value = false
  })
}
// #endregion

// #region 修改的对话框
const mvisible = ref(false)
const modifyInfo = ref({} as TbGame)

const showModify = (info: TbGame) => {
  ApiService.get(`/crud/game/${info.gid}`, {}, (resp: BaseDataResult<TbGame>) => {
    if (resp.success) {
      modifyInfo.value = resp.data
      modifyInfo.value.created = Tools.formatDate(modifyInfo.value.created)
      modifytitle.value = resp.data.tbGamePublisher.publisher
      mvisible.value = true
    } else {
      ElMessage.error(resp.message)
    }
  })
}

const modify = () => {
  modifyInfo.value.tbGamePublisher = {} as TbGamePublisher
  ApiService.put('/crud/game', modifyInfo.value, (resp: BaseResult) => {
    resp.success ? ElMessage.success(resp.message) : ElMessage.error(resp.message)
    mvisible.value = false
  })
}

// #endregion

// #region 删除
const del = (info: TbGame) => {
  ElMessageBox.confirm(`是否删除：${info.gname}`).then(() => {
    ApiService.delete(`/crud/softwaretype/${info.gid}`, {}, (resp: BaseResult) => {
      resp.success ? ElMessage.success(resp.message) : ElMessage.error(resp.message)
      query()
    })
  })
}
// #endregion
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-content: flex-end;
}
.pre_info {
  font-size: 13px;
  white-space: pre-wrap; //文本换行
  word-wrap: break-word; //英文换行
}
</style>
